<template>
  <div v-if="showFlag && userStore.vipshow" class="bannerbox pointer pr" :class="[istop?'mt50':'']" style="z-index: 1000" title="点击查看会员" @click="handleUserVipDialog">
    <span class="ksd-resume-close" @click="handleClose"><i class="iconfont icon-shanchu4"></i></span>
    <img src="/imgs/vipshow.jpg" alt="">
    <teleport to="body">
      <ksd-vip ref="userVipRef"></ksd-vip>
    </teleport>
  </div>
</template>
<script setup>
const userVipRef = ref({})
const showFlag = ref(false)
const userStore = useStore.userState()
const props = defineProps({
  istop:{
    type:Boolean,
    default:false
  }
})
const handleUserVipDialog = async ()=>{
  await useLoginDialog()
  userVipRef.value.handleOpen()
}
const handleClose =  ()=>{
  showFlag.value = false
  sessionStorage.setItem("ksd-vip-markshow","hidden")
}
onMounted(() => {
  if(userStore.viptype < 4) {
    var flag = sessionStorage.getItem("ksd-vip-markshow")
    if (flag && flag == 'hidden') {
      showFlag.value = false
    }
    setTimeout(() => {
      showFlag.value = true
    }, 1000 * 60)
  }else{
    showFlag.value = false
  }
})

</script>
<style scoped>
.bannerbox{height: 48px;line-height: 48px;display: flex;justify-content: center}
.bannerbox img{height: 100%!important;}
.ksd-resume-close {
  position: absolute;
  right: 10px;
  z-index: 1000;
  cursor: pointer;
}
</style>